import {
  getPlayListDetail,
  getPlayListDynamic,
  getPlayListTracks,
  getTopPlayList,
  getHqListTags,
  getHotListCategory,
  getTopPlayListTrue,
  getPlaylistCollecter,
  getMyLikedMusic,
} from "@/api/album";
import { ref } from "vue";
import {
  PlayListDetail,
  PlayListSong,
  HotPlayListTag,
  MainTag,
  Collector,
} from "@/types/album";

export function usePlayListDetail() {
  const playListDetail = ref<PlayListDetail>();

  const queryPlayListDetail = async (id: number) => {
    const res = await getPlayListDetail({ id });

    if (res.code === 200) {
      playListDetail.value = res.playlist;
    }
  };

  return { playListDetail, queryPlayListDetail };
}

export function usePlayListDynamicInfo() {
  const dynamicInfo = ref<any>();
  const queryDynamicInfo = (id: number | string) => {
    getPlayListDynamic(id).then((res) => {
      console.log(res);
    });
  };

  return { dynamicInfo, queryDynamicInfo };
}

interface PlayListSongMore extends PlayListSong {
  st: number;
}

export function usePlayListTracks() {
  const tracks = ref<PlayListSong[]>([]);
  const tableLoading = ref<boolean>(false);
  const queryTracks = (
    id: number | string,
    limit?: number,
    offset?: number,
    cb?: (...args: any) => void
  ) => {
    tableLoading.value = true;
    getPlayListTracks(id, limit, offset)
      .then((res) => {
        if (res && res.code === 200) {
          const datas = res.songs.map((item, index) => {
            const privileg = res.privileges[index];
            return { ...item, st: privileg.st };
          });
          tracks.value = datas;
          if (typeof cb === "function") {
            cb();
          }
        }
      })
      .finally(() => {
        tableLoading.value = false;
      });
  };
  return { tracks, queryTracks, tableLoading };
}

export function useTopPlayList() {
  const topList = ref<PlayListDetail[]>([]);

  const queryTopList = (params?: {
    limit?: number;
    offset?: number;
    cat?: string;
  }) => {
    getTopPlayList(params).then((res) => {
      if (res.code === 200) {
        topList.value = res.playlists;
      }
    });
  };

  return { topList, queryTopList };
}

export function useHqTags() {
  const tags = ref<MainTag[]>([]);

  const queryHqTags = () => {
    getHqListTags().then((res) => {
      if (res.code === 200) {
        tags.value = res.tags;
      }
    });
  };

  return { tags, queryHqTags };
}

export function useHotListCategory() {
  const hotTags = ref<HotPlayListTag[]>([]);

  const queryHostList = () => {
    getHotListCategory().then((res) => {
      if (res.code === 200) {
        hotTags.value = res.tags;
      }
    });
  };
  return { hotTags, queryHostList };
}

export function useTopPlayListTrue() {
  const playList = ref<PlayListDetail[]>([]);
  const total = ref<number>(0);

  const queryPlayList = (params?: {
    cat: string;
    offset: number;
    limit: number;
  }) => {
    getTopPlayListTrue(params).then((res) => {
      if (res.code === 200) {
        playList.value = res.playlists;
        total.value = res.total;
      }
    });
  };

  return { playList, total, queryPlayList };
}

export function usePlayListCollector() {
  const collectors = ref<Collector[]>([]);
  const total = ref(0);

  const query = (params: {
    id: number | string;
    limit?: number;
    offset?: number;
  }) => {
    getPlaylistCollecter(params).then((res) => {
      if (res.code === 200) {
        collectors.value = res.subscribers;
        total.value = res.total;
      }
    });
  };

  return { collectors, total, query };
}

export function useMyLikedMusic() {
  const likedMusics = ref<PlayListSong[]>([]);
  const queryLikedMusic = (uid: number | string) => {
    getMyLikedMusic(uid).then((res) => {
      console.log(res);
    });
  };

  return { likedMusics, queryLikedMusic };
}
